<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example: PopupMarker</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQGj0PqsCtxKvarsoS-iqLdqZSKfxRdmoPmGl7Y9335WLC36wIGYa6o5Q" type="text/javascript"></script>
    <script type="text/javascript">
    document.write('<script type="text/javascript" src="../src/popupmarker'+(document.location.search.indexOf('packed')>-1?'_packed':'')+'.js"><'+'/script>');
  </script>
    <script type="text/javascript">

    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 1);
        
        var opt = {text:"<img src='images/japan.jpg' width='20' height='13'>Japan, Tokyo<br><br>Please drag me!", draggable:true};
        var marker1 = createMaker(new GLatLng(35.681382, 139.766084), "Japan,Tokyo", opt);
        map.addOverlay(marker1);
        
        var opt = {text:"<img src='images/usa.jpg' width='20' height='13'>USA,NewYork", draggable:true};
        var marker2 = new PopupMarker(new GLatLng(40.756054, -73.986951), opt);
        map.addOverlay(marker2);
        marker2.showPopup();
      }
    }
    
    function createMaker(latlng, msg, opt){
        var marker = new PopupMarker(latlng, opt);
        
        GEvent.addListener(marker,"click", function(){
            marker.openInfoWindowHtml(msg);
            marker.hidePopup();
        });
        return marker;
    }
    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 600px; height: 500px"></div><br>
    Please drag the markers.
  </body>
</html>

